.clearfix() {
  &:after,
  &:before {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// No Scrollbar
.no-scrollbar() {
  &::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    opacity: 0 !important;
  }
}


.ellipsis() {
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  word-wrap: break-word;
}

.scrollable() {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.active-highlight (@opacity, @color) {
  &:active::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: @opacity;
    background-color: @color;
  }
}

.hairline(@position, @color) when (@position = top) {
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 1px; /*no*/
    width: 100%;
    background-color: @color;
    display: block;
    z-index: 15;
    // .transform-origin(50% 0%);
    html.pixel-ratio-2 & {
      transform: scaleY(0.5);
    }
    html.pixel-ratio-3 & {
      transform: scaleY(0.33);
    }
  }
}
.hairline(@position, @color) when (@position = left) {
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    width: 1px; /*no*/
    height: 100%;
    background-color: @color;
    display: block;
    z-index: 15;
    // .transform-origin(0% 50%);
    html.pixel-ratio-2 & {
      transform: scaleX(0.5);
    }
    html.pixel-ratio-3 & {
      transform: scaleX(0.33);
    }
  }

}
.hairline(@position, @color) when (@position = bottom) {
  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 1px; /*no*/
    width: 100%;
    background-color: @color;
    display: block;
    z-index: 15;
    html.pixel-ratio-2 & {
      transform: scaleY(0.5);
    }
    html.pixel-ratio-3 & {
      transform: scaleY(0.33);
    }
  }
}
.hairline(@position, @color) when (@position = right) {
  &:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    left: auto;
    bottom: auto;
    width: 1px; /*no*/
    height: 100%;
    background-color: @color;
    display: block;
    z-index: 15;
    // .transform-origin(100% 50%);
    html.pixel-ratio-2 & {
      transform: scaleX(0.5);
    }
    html.pixel-ratio-3 & {
      transform: scaleX(0.33);
    }
  }
}

// For right and bottom
.hairline-remove(@position) when not (@position = left) and not (@position = top) {
  &:after {
    display: none;
  }
}
// For left and top
.hairline-remove(@position) when not (@position = right) and not (@position = bottom) {
  &:before {
    display: none;
  }
}
// For right and bottom
.hairline-color(@position, @color) when not (@position = left) and not (@position = top) {
  &:after {
    background-color: @color;
  }
}
// For left and top
.hairline-color(@position, @color) when not (@position = right) and not (@position = bottom) {
  &:before {
    background-color: @color;
  }
}
